
import React  from "react";
import Head from "../../components/head/head";
import axios from '../../utils/axios.js'
import Filter from  './component/filter.jsx'
import './find.scss'
import {AutoSizer,WindowScroller,List,InfiniteLoader} from 'react-virtualized'
import HouseList from '../../components/roomList/houseList.jsx'
import Stick from '../../components/stick/stick.jsx'
import {Toast} from 'antd-mobile'
let headStyle={
    width:'100vw',
    background:'#f6f5f6',
    padding:'8px 10px',
    height:'45px'
}
export default class Find extends React.Component{
    constructor(){
        super()
        this.fparams={}
        this.isloding=true
        this.state={
            house:[],
            total:0
        }
        this.cityId=JSON.parse(localStorage.getItem('local_city')).value
    }
    changeItem=(value)=>{
       let {area,price,type,select}=value
       let {sf,so,sr,sc}=select
       let more=[...sr,...so,...sf,...sc]
       this.fparams={}
       if(area[0]){
         this.fparams[area[0]]=(area[2]==null||area[2]=='null')?area[1]:(area[2]||null)
       }else{
        this.fparams.area=null
       }
       this.fparams.mode=type[0]||null
       this.fparams.price=price[0]||null
       this.fparams.more=more.join(',')||null
       window.scrollTo(0,0)
       this.getHouseList()
       
    }
    componentDidMount(){
         this.getHouseList()
    }
    getHouseList=async ()=>{
      Toast.loading('加载中.....',0)
      this.isloding=true
      let res=await axios.get('/houses',{
        params:{
            cityId:this.cityId,
            ...this.fparams,
            start: 1,
            end: 20
        }
      })
      Toast.hide()
      this.isloding=false
      this.setState({
        total:res.data.body.count,
        house:res.data.body.list  
      })
    }
    getRenderList=()=>{
      let {house}=this.state
      if (house.length<1) {
        return !this.isloding?(
          <div className="no-data">
            <img
              className='no-img'
              src={ 'http://localhost:8080/img/not-found.png'}
              alt="暂无数据"
            />
            <p className='no-text'>暂无数据</p>
          </div>
        ):''
      }else{
        return (
          <InfiniteLoader
          isRowLoaded={this.isRowLoaded}
          loadMoreRows={this.loadMoreRows}
          rowCount={this.state.total}
          >
            {({onRowsRendered,registerChild})=>(
              <WindowScroller>
                {({height,isScrolling,scrollTop})=>(
                    <AutoSizer>
                        {({width})=> (
                          <List width={width} height={height} 
                              onRowsRendered={onRowsRendered}
                              autoHeight  // 设置高度为 WindowScroller 最终渲染的列表高度
                              ref={registerChild}
                              rowHeight={120} rowCount={this.state.total} 
                              rowRenderer={this.renderList}
                              isScrolling={isScrolling}
                              scrollTop={scrollTop}>
                          </List>)
                        }
                    </AutoSizer>
                )}
              </WindowScroller>
            )}
          </InfiniteLoader>
        )
      }
    }
    renderList=({key,index,style})=>{
      
      let {house}=this.state
      let houseList=[house[index]]
      return <div className="h-div" key={key} style={style}>
             <HouseList houseList={houseList}></HouseList>
      </div>
    }
    isRowLoaded=({index})=>{
      //判断列表的每一项是否加载玩完成
      return !!this.state.house[index]
    }
    loadMoreRows=({startIndex, stopIndex })=>{
       return new Promise(reslove=>{
         axios.get('/houses',{
           params:{
             cityId:this.cityId,
             ...this.fparams,
             start:startIndex,
             end:stopIndex
           }
         }).then(res=>{
           console.log(res)
              this.setState({
                house:[...this.state.house,...res.data.body.list]
              })
              reslove()
         })
       })
    }
    render(){
        return <div className='find'>
                <Head headStyle={headStyle}></Head>
                <Stick>
                    <Filter changeItem={this.changeItem}></Filter>
                </Stick>
                <div className="h-main">
                    {this.getRenderList()}
                </div>
                
                
        </div>
    }
}